<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>我的博客</title>
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../res/css/main.css">
  <!--加载meta IE兼容文件-->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
</head>
<style>
  .userLabel{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 30px
  }
  .empty{

  }
</style>
<body>
<div class="header" style="margin-bottom: 40px">
  <div class="menu-btn">
    <div class="menu"></div>
  </div>
  <h1 class="logo">
    <a href="index.html">
      <span>MYBLOG</span>
      <img src="../res/img/logo.png" style="width: 120px;height: 80px">
    </a>
  </h1>
  <div class="nav">
    <a href="/toIndex.action" >文章</a>
    <a href="/toMyBlog.action"class="active">我的博客</a>
    <a href="/toWrite.action">写博客</a>
    <a href="/toAlbum.action">相册</a>
    <a href="/toAbout.action">个人空间</a>
    <input form="searchForm" type="text" name="searchKey" placeholder="  搜索博客"  style="border-radius: 4px
      ;padding: 3px 0px;font-family: Microsoft YaHei UI;border-style: solid;border-color: forestgreen;">
    <button class="layui-btn" onclick="search()"><i class="layui-icon">&#xe615;</i>搜索</button>
    <label th:if="${session.loginUser != null}">
      <img class="userLabel" th:if="${session.loginUser.sex == 'female'}"src="../res/img/label/girl.png" >
      <img class="userLabel" th:if="${session.loginUser.sex == 'male'}"src="../res/img/label/boy.png" >
      <a href="/toAbout.action" style="color: forestgreen;margin-left: 5px;" th:text="'欢迎您,'+${session.loginUser.name}"></a>
    </label>
  </div>
  <form id="searchForm" action="/searchEssayByTitle.action"></form>
  <div th:if="${session.loginUser != null}">
    <p  class="welcome-text">
      <a href="toLogout" class="layui-btn">注销</a>
    </p>
  </div>
  <ul class="layui-nav header-down-nav">
    <li class="layui-nav-item"><a href="/toIndex.action" >所有文章</a></li>
    <li class="layui-nav-item"><a href="/toMyBlog.action">我的博客</a></li>
    <li class="layui-nav-item"><a href="/toWrite.action">写博客</a></li>
    <li class="layui-nav-item"><a href="/toAlbum.action">相册</a></li>
    <li class="layui-nav-item"><a href="/toAbout.action">个人空间</a></li>
    <li class="layui-nav-item" th:if="${session.loginUser == null}"><a href="toLogin">登录</a></li>
    <li class="layui-nav-item" th:if="${session.loginUser != null}"><a href="toLogout">注销</a></li>
  </ul>
</div>


<div class="content whisper-content">
  <div class="cont">
    <div class="whisper-list">
      <div th:if="${session.myEssayList != null}" th:each="essay:${session.myEssayList}" class="item-box">
        <div class="item">
          <div class="whisper-title">
            <i class="layui-icon layui-icon-date"></i>
            <span class="data"></span><span th:text="${essay.publishTime.toString()}"></span>
            <span th:text="${essay.title}" style="font-size: 25px;margin-left: 5%;"></span>

          </div>
          <form class="layui-form" method="post">
            <input type="hidden" th:value="${essay.id}" name="essayId">
            <button class="layui-btn" lay-submit="" lay-filter="essayDelete" style="float: right;margin-right: 10%"><i class="layui-icon">&#xe640;</i></button>
          </form>
          <form class="layui-form" method="get" action="/searchEssayByNumber.action">
            <input type="hidden" th:value="${essay.number}" name="essayNumber">
            <button class="layui-btn" type="submit" style="float: right;margin-right: 10%">详情</button>
          </form>
          <div class="layui-form-item">
            <i class="layui-icon">&#xe60a;</i>
            <pre class="text-cont" th:text="${essay.content}" id="textArea" style="height: 48px;overflow: hidden;margin-bottom: 5px"></pre>
            <p style="font-size: 20px">··················</p>
          </div>
          <div class="img-box">
            <img th:src="@{${essay.imgUrl}}" width="300px" height="200px">
          </div>
          <div class="op-list">
            <p class="off"><span>展开</span><i class="layui-icon layui-icon-down"></i></p>
          </div>
        </div>
        <div class="review-version layui-hide">
          <div class="form">
            <img src="../res/img/header2.png">
            <form class="layui-form" method="post">
              <!--隐藏表单提交相关数据-->
              <input type="hidden" name="essayId" th:value="${essay.id}">
              <input th:if="${session.loginUser} != null" type="hidden" name="userId" th:value="${session.loginUser.id}">
              <div class="layui-form-item layui-form-text">
                <div class="layui-input-block">
                  <textarea name="comment" th:id="content+${essay.id}" placeholder="发表你的评论!" class="layui-textarea"></textarea>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: right;">
                  <!--<input class="layui-btn definite">確定</input>-->
                  <button lay-submit="" lay-filter="formDemo" class="layui-btn ">確定</button>
                </div>
              </div>
            </form>
          </div>
          <div class="list-cont" th:each="comment:${session.commentList}">
            <div class="cont" th:if="${comment.essayId}==${essay.id}">
              <div class="img">
                <img src="../res/img/header.png" alt="">
              </div>
              <div class="text">
                <p class="tit"><span class="name" th:text="${comment.username}"></span><span class="data" th:text="${comment.publishTime}"></span></p>
                <p class="ct" th:text="${comment.content}"></p>
                <form class="layui-form" method="post">
                  <input type="hidden" th:value="${comment.id}" name="commentId">
                  <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="formDelete" style="float: right"><i class="layui-icon">&#xe640;</i></button>
                </form>
                <!--<button class="layui-btn layui-btn-sm" style="float: right"><i class="layui-icon">&#xe640;</i></button>-->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div th:if="${session.myEssayList.isEmpty()}">
        <img th:src="@{${session.emptyImg}}" alt="" style="width: 480px;height: 320px">
        <a href="/toWrite.action" style="color: forestgreen;margin-left: 120px;font-size: 16px">博客暂时为空,去写博客</a>
      </div>
    </div>
  </div>
    <div style="text-align: center;">
        <p th:text="当前为+${session.pageNumMyBlog}+页" style="font-size: large"></p>
        <form action="/toLastMyBlogPage.action" th:if="${session.hasLastMyBlog == 1}">
            <input type="hidden" th:value="${session.pageNumMyBlog}" name="pageNum">
            <button type="submit" class="layui-btn" style="margin-top: 10px;float: left;margin-left: 30%">上一页</button>
        </form>
        <form action="/toNextMyBlogPage.action" th:if="${session.hasNextMyBlog == 1}">
            <input type="hidden" th:value="${session.pageNumMyBlog}" name="pageNum">
            <button type="submit" class="layui-btn" style="margin-top: 10px;float: right;margin-right: 30%">下一页</button>
        </form>
    </div>
</div>
<!--<script type="text/html" id="laytplCont">
  <div class="cont">
    <div class="img">
      <img src="{{d.avatar}}" alt="">
    </div>
    <div class="text">
      <p class="tit"><span class="name">{{d.name}}</span><span class="data">2018/06/06</span></p>
      <p class="ct">{{d.cont}}</p>
    </div>
  </div>
</script>-->
<div class="footer-wrap">
  <div class="footer w1000">
    <div class="qrcode">
      <img src="../res/img/erweima.jpg">
    </div>
    <div class="practice-mode">
      <img src="../res/img/down_img.jpg">
      <div class="text">
        <h4 class="title">我的联系方式</h4>
        <p>微信<span class="WeChat">15521306790</span></p>
        <p>手机<span class="iphone">15521306790</span></p>
        <p>邮箱<span class="email">1115051923@qq.com</span></p>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="../res/layui/layui.js"></script>
<script type="text/javascript">
  layui.config({
    base: '../res/js/util/'
  }).use(['element','laypage','form','menu'],function(){
    element = layui.element,laypage = layui.laypage,form = layui.form,menu = layui.menu;
    laypage.render({
      elem: 'demo'
      ,count: 70 //数据总数，从服务端得到
    });
    $=layui.jquery;
    var form = layui.form;
    form.on('submit(formDemo)', function(data){
      $.ajax({
        url:'/addComment.action',
        method:'post',
        data:data.field,
        dataType:'JSON',
        success:function(res){
          var layer = layui.layer;
          layer.msg(res.msg, {
            time: 1000, //1s后自动关闭
            icon: 1
          });
        },
        error:function (data) {

        }
      });
      return false;
    })

    form.on('submit(essayDelete)', function(data){
      $.ajax({
        url:'/essayDelete.action',
        method:'post',
        data:data.field,
        dataType:'JSON',
        success:function(res){
          var layer = layui.layer;
          layer.msg(res.msg, {
            time: 2000, //1s后自动关闭
            icon: 1
          });
        },
        error:function (data) {

        }
      });
      return false;
    })
    menu.init();
    menu.off();
    menu.submit()

    form.on('submit(formDelete)', function(data){
      $.ajax({
        url:'/deleteComment.action',
        method:'post',
        data:data.field,
        dataType:'JSON',
        success:function(res){
          var layer = layui.layer;
          layer.msg(res.msg, {
            time: 2000, //1s后自动关闭
            icon: 1
          });
        },
        error:function (data) {

        }
      });
      return false;
    });
  })

</script>
<script>
  function search() {
    document.getElementById("searchForm").submit();//js原生方式表单提交
  }
</script>

</body>
</html>